<template>
        <el-container class="h-full">
                <el-aside width="240px" class="mr-8 overflow-h">
                    <common-nav @selectMenu="selectMenu"></common-nav>
                </el-aside>
            <el-container>
                <common-header></common-header>
                <common-tab :tabInfo="tabInfo" ref="commonTab" class="main-tab"></common-tab>
                <el-container class="main-content wrapper mr-8">
                    <section class="w-full h-full flex">
                        <keep-alive>
                            <router-view/>
                        </keep-alive>
                    </section>
                </el-container>
            </el-container>
        </el-container>
</template>

<script>

    import commonNav from './nav';
    import commonHeader from './header';
    import commonTab from './tab';

    export default {
        name: "index",
        data() {
            return {
                tabInfo: []
            }
        },
        created() {
            let noticeCount = 0;
            let importantNoticeCount = 0;
            this.$http({
                url: '/notice/notices',
                method: 'get',
            }).then((data) => {
                for(let notice of data){
                    if(notice.isRead!='1'){
                        noticeCount++;
                        if(notice.isImportant!='1'){
                            importantNoticeCount++;
                        }
                    }
                }
                if(noticeCount>0){
                    this.$notify({
                        title: '提示',
                        message: '您有'+noticeCount+'条未读通知！其中'+importantNoticeCount+'条重要通知！',
                        position: 'bottom-right',
                        type: 'warning',
                        duration: 0
                    });
                }
            })
        },
        methods: {
            selectMenu(val) {
                this.$global.addTab(val);
            }
        },
        components: {
            commonNav,
            commonHeader,
            commonTab
        }
    }
</script>

<style scoped>
</style>